<template>
  <!-- 轮播图区域 -->
  <div class="carouselWrapper">
    <div class="carousel">
      <!-- Carousel 组件，展示轮播图 -->
      <Carousel style="width: 70vw;" :data="data.banner"></Carousel>
    </div>
  </div>
  <!-- 展示区域 -->
  <Introduction :data="data.active" :title="data.activeTitle"></Introduction>
  <!-- 其他展示区域 -->
  <Banner></Banner>
  <!-- 页脚 -->
  <Footer></Footer>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';

import Carousel from '../components/Carousel.vue';
import Footer from '../components/Footer.vue';
import Other from '../components/Other.vue';
import Introduction from "../components/Introduction.vue";
import Banner from "../components/Banner.vue";

// 获取当前路由
const route = useRoute();

// 定义响应式数据
const data = ref({});
const color = ref('#71361D');

// 获取数据的函数
const getData = () => {
  axios.get(`../public/${route.name}.json`).then((res) => {
    data.value = res.data; // 更新数据
  });
  color.value = route.meta.color; // 更新颜色
};

// 初次获取数据
getData();

// 监听路由变化，当路由变化时重新获取数据
watch(route, () => {
  getData();
});
</script>

<style>
/* 样式定义 */
.carouselWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
